<template>
	<view class="customNavbar" :style="{'background':bgColor}">
		<!-- 系统导航栏 -->
		<view class="system" :style="{'height':`${statusBar}px`,'background':bgColor}"></view>
		<view class="navbar" :style="{'height':`${(customBar - statusBar)}px`}">
			<!-- 通过具名插槽来自定义导航栏中间内通 -->
			<view class="content1">
				<view class="leftarrow" @click="back"><image src="../../static/zuojiantou.png" class="image"></image></view>
				<image :src="imageurl" class="avatar" mode="aspectFill"></image>
				<text class="textsmall">{{ title }}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusBar: 0, // 状态栏
				customBar: 0, // 状态栏 + 导航栏高度
				platform: "", // 平台
			}
		},
		props: {
			// 自定义左侧文字
			leftText: {
				type: String,
				default: ""
			},
			// 标题名称
			title: {
				type: String,
				default: ""
			},
			title1: {
				type: String,
				default: ""
			},
			// 自定义右侧文字
			rightText: {
				type: String,
				default: ""
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "#fff"
			},
			imageurl: {
				type: String,
				default: ""
			},
		},
		mounted() {
			/*
				这里通过 uni.getSystemInfo 获取系统信息
				用来计算系统导航栏高度和导航栏高度
			*/
			uni.getSystemInfo({
				success: (res) => {
					this.platform = res.platform
					// #ifdef MP-WEIXIN
					this.statusBar = res.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - res.statusBarHeight
					// #endif
					// #ifdef APP-PLUS
					this.statusBar = res.statusBarHeight
					this.customBar = res.statusBarHeight + 45
					// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
					if (res.platform == "android") {
						this.statusBar += 3
						this.customBar += 3
					}
					// #endif
				}
			})
			// getCurrentPages 官方解释用于获取当前页面的实例  官方地址：https://uniapp.dcloud.net.cn/uni-app-x/api/get-current-pages.html#getcurrentpages
			//let pages = getCurrentPages()
			// if (pages[pages.length - 2]) {
			// 	this.isPageUp = true
			// } else {
			// 	this.isPageUp = false
			// }
		},
		methods: {
			// 返回上一页面
			back() {
				console.log("返回上一页！")
				uni.navigateBack({
					delta:1
				})
			},
			// 微信小程序返回首页
			homePage() {
				console.log("返回首页！")
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.customNavbar {
		background: #ad6a7c;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		.system {
			width: 100vw;
			background: #ad6a7c;
		}

		.navbar {
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			padding: 0 30rpx;
		}

		.left,
		.right {
			width: 88rpx;
		}

		.left {
			text-align: left;
		}

		.content1 {
			text-align: left;
			display: flex;
			align-items: center;
			justify-content:left;
			width: 290rpx;
			.leftarrow{
				height: 46rpx;
				width: 46rpx;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			.textsmall{
				font-size: 34rpx;
				margin-left: 10rpx;
			}
			.avatar{
				height: 54rpx;
				width: 54rpx;
				border-radius: 50%;
				margin-left: 20rpx;
				margin-right: 10rpx;
			}
		}

		.right {
			text-align: right;
		}
	}
</style>
